<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'" 
  >
    <navbar :title="$t('search')" :back="false" />
    <view class="main">
      <!-- ئىزداش رامكىسى -->
      <view class="search-box">
        <view class="search-input">
          <u-icon name="search" size="40" color="#666"></u-icon>
          <input 
            type="text"
            v-model="searchText"
            :placeholder="$t('dir') == 'rtl' ? 'ئىزدەيدىغان مەزمۇننى كىرگۈزۈڭ' : '请输入搜索内容'"
            @confirm="handleSearch"
          />
          <view class="search-btn" @click="handleSearch">
            {{ $t('dir') == 'rtl' ? 'ئىزدەش' : '搜索' }}
          </view>
        </view>
      </view>

      <!-- نەتىجە تىزىملىكى -->
      <view class="search-results">
        <house-row
          v-for="(item, index) in searchResults.data"
          :key="index"
          :item="item"
          @click="toDetail(item)"
        />
        <u-empty
          v-if="searchResults.data && searchResults.data.length === 0 && searchResults.loadmoreStatus !== 'loading'"
          mode="list"
          icon="/static/images/empty.png"
          :text="$t('no_content')"
          style="padding-top: 250rpx"
        />
        <u-loadmore
          v-else
          :status="searchResults.loadmoreStatus"
          :loading-text="$t('loadingText')"
          loadmore-text="."
          nomoreText="."
          :isDot="true"
          :line="searchResults.loadmoreStatus == 'nomore'"
          color="#bfbfbf"
        />
      </view>

    </view>
    <tabbar :activeTab="3" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchResults: {
        current_page: 1,
        data: [],
        last_page: 1,
        loadmoreStatus: 'loadmore'
      },
      isLoading: false
    };
  },
  onLoad() {},
  onShow() {},
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.searchResults.current_page < this.searchResults.last_page) {
      this.searchResults.current_page += 1;
      this._getSearchList();
    }
  },
  methods: {
    async handleSearch() {
      this.searchResults.current_page = 1;
      this.searchResults.data = [];
      await this._getSearchList();
    },

    async _getSearchList() {
      if (!this.searchText.trim()) return;
      if (this.isLoading) return;
      
      this.isLoading = true;
      this.searchResults.loadmoreStatus = 'loading';
      const params = {
        page: this.searchResults.current_page,
        pageSize: 10,
        lang: this.$t('dir') == 'rtl' ? 'ug' : 'zh',
        content: this.searchText
      };
      console.log('Fetching page:', this.searchResults.current_page);

      try {
        const res = await this.$uniapi('/get_search_list', params);
        if (res.code == 200) {
          const list = res.data;
          console.log('Response:', list);
          
          if (this.searchResults.current_page == 1) {
            this.searchResults.data = list.data;
          } else {
            this.searchResults.data.push(...list.data);
          }
          
          if (this.searchResults.current_page >= this.searchResults.last_page) {
            this.searchResults.loadmoreStatus = 'nomore';
          } else {
            this.searchResults.loadmoreStatus = 'loadmore';
          }
          this.searchResults.last_page = list.last_page;
        }
      } catch (err) {
        this.searchResults.loadmoreStatus = 'loadmore';
        console.error('Search error:', err);
      } finally {
        this.isLoading = false;
      }
    },

    toDetail(item) {
      uni.navigateTo({
        url: '/pages/info/show?id=' + item.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
}

.search-box {
  margin-bottom: 40rpx;
  
  .search-input {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20rpx 30rpx;
    border-radius: 50rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    
    input {
      flex: 1;
      height: 60rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
    }
    
    .search-btn {
      background: #000;
      color: #fff;
      padding: 12rpx 40rpx;
      border-radius: 30rpx;
      font-size: 28rpx;
    }
  }
}

.params-box {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .param-item {
    margin-bottom: 40rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .param-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .param-tags {
      display: flex;
      flex-wrap: wrap;
      margin: -10rpx;
      
      .tag {
        margin: 10rpx;
        padding: 12rpx 30rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
        color: #666;
        background: #f5f7fa;
        transition: all 0.3s;
        
        &.active {
          background: #000;
          color: #fff;
        }
        
        &:active {
          opacity: 0.7;
        }
      }
    }
  }
}

.search-results {
  margin-top: 30rpx;
}
</style>